<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('充值')}}</header-view>
		<view class="content">
			<u--form errorType="toast" ref="uForm">
				<view class="list">
					<view class="item flex">
						<view class="name">{{$t('充值网络：')}}</view>
						<u--input disabled :placeholder="$t('请选择充值网络')" border="none" v-model="activeChannel.name" type="text"
							color="#fff" suffixIcon="arrow-down" suffixIconStyle="color: #fff">
							<template slot="suffix">
								<u-icon name="arrow-down" @click="openTypeList"></u-icon>
							</template>
						</u--input>
					</view>
				</view>
				<!-- <view class="list" style="margin-top: 30rpx;">
					<view class="item flex">
						<view class="name">充值网络：</view>
						<u--input disabled placeholder="请选择充值网络" border="none" v-model="activeChannel.name" type="text"
							color="#fff" suffixIcon="arrow-down" suffixIconStyle="color: #fff">
							<template slot="suffix">
								<u-icon name="arrow-down" @click="openTypeList2"></u-icon>
							</template>
						</u--input>
					</view>
				</view> -->
				<!-- 把真实输入框隐藏掉 -->
				<!-- <u-form-item :borderBottom="false" v-show="false" prop="channel_id" ref="item1">
					<u--input disabled placeholder="请选择充值渠道" border="none" v-model="formData.channel_id" type="text"
						color="#fff" suffixIcon="arrow-down" suffixIconStyle="color: #fff">
						<template slot="suffix">
							<u-icon name="arrow-down" @click="show=true"></u-icon>
						</template>
					</u--input>
				</u-form-item> -->
				<u-form-item :borderBottom="false" prop="money" ref="item2">
					<view class="list">
						<view class="item flex">
							<view class="name">{{$t('充值金额：')}}</view>
							<u--input :placeholder="$t('请选择充值金额')" border="none" v-model="money" type="number"
								color="#fff"></u--input>
						</view>
						<view class="amount-list">
							<view class="amount-item bg-white" v-for="(item, idx) in amountList" :key="idx"
								@click="selectedAmount(item, $event)">
								<text>{{ `${item}$` }}</text>
							</view>
						</view>
						<u-button class="submit" :text="$t('充值')" @tap="submit"></u-button>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<u-action-sheet :actions="channelList" :closeOnClickOverlay="true" :show="show" @close="close" round="20"
			safeAreaInsetBottom @select="selectCard"></u-action-sheet>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		getRechargeChannelApi,
		rechargeConfirmApi,
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				channelText: "", //选择器选中的input显示文本
				money: "",
				show: false, //控制选择器显示隐藏
				channelList: [],
				activeChannel: {},
				amountList: [100, 200, 500, 1000, 5000, 10000, 50000, 100000],
			};
		},
		onLoad() {
			// this.getChannelList()
		},
		methods: {
			//获取充值网络
			async getChannelList() {
				getRechargeChannelApi().then(res => {
					console.log(res.data.data, '充值网络');
					this.channelList = res.data.data
					this.channelList.map(item => {
						item.color = '#ffaa65'
						item.fontSize = '20'
						item.subname = item.value
					})
					console.log(this.channelList, '@@@@@@@@@');
				})
			},
			openTypeList() {
				this.show = true
				this.getChannelList()
			},
			close() {
				this.show = false
			},
			selectCard(e) {
				console.log(e)
				this.activeChannel = e
			},
			selectedAmount(amount, e) {
				this.money = String(amount)
			},
			submit() {
				rechargeConfirmApi({
					type: this.activeChannel.type,
					channel_id: this.activeChannel.id,
					money: this.money
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.money = ""
					setTimeout(() => {
						let url = encodeURIComponent(res.data.data.url)
						uni.navigateTo({
							url: "/pages/webview/webview?url=" + url
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.content {
			padding: 0 24rpx;

			.card {
				background: url("../../static/img/bgImg.png") no-repeat center / 100%;
				width: 100%;
				height: 308rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #ffaa65;
				padding: 0 20rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: cneter;
				justify-content: center;
				flex-direction: column;
				text-align: center;

				.balance {
					font-size: 50rpx;
					font-weight: 700;
					margin-top: 60rpx
				}
			}

			.list_btn {
				background: #1f2039;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 0 28rpx;
				font-size: 32rpx;
				height: 80rpx;
				font-weight: 400;
				color: #fefefe;
			}

			.list {
				.item {
					height: 100rpx;
					background: #1f2039;
					border-radius: 20rpx;
					margin-top: 16rpx;
					padding: 0 20rpx;

					.name {
						width: 180rpx;
						height: 100rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #fefefe;
						line-height: 100rpx;
					}

					.u-input {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
					}
				}

				.tips {
					font-size: 24rpx;
					font-weight: 500;
					color: #ed2e40;
					padding: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.submit {
					height: 88rpx;
					background: #4c3d89;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
					margin-top: 66rpx;
					border: none;
				}
			}
		}

		::v-deep .u-popup__content {
			background: #FFF !important;
		}

		::v-deep .u-input {
			background-color: #FFFFFF00 !important;
			padding: 0px;
		}

		.amount-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 60rpx;
		}

		.amount-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10px;
			padding: 20rpx;
		}

		.bg-white {
			background-color: #fff;
		}

		/deep/.u-popup__content {
			background: #1f2039 !important;
			padding-bottom: 20rpx;

			.u-action-sheet__item-wrap__item {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				/deep/.u-action-sheet--hover {
					background: #1f2039;
				}

				.u-action-sheet__item-wrap__item__name,
				.u-action-sheet__item-wrap__item__subname {
					font-size: 32rpx !important;
				}

				.u-action-sheet__item-wrap__item__subname {
					margin-top: 0;
				}
			}
		}
	}
</style>